<template>
    <div>
        <div class="dabg">
            <div class="gebgh">
                <div>
                    <h2>
                        <span class="hbnh" @click="$router.go(-1)">
                            <a class="fan"></a>
                        </span> 开户
                    </h2>
                </div>
                <div class="fourg"><span class="xian"></span>
                    <div class="fouda">
                        <div class="danhe"><span>1</span></div>
                        <p>注册</p>
                    </div>
                    <div class="fouda">
                        <div class="danhe"><span>2</span></div>
                        <p>认证</p>
                    </div>
                    <div class="fouda">
                        <div class="danhe"><span>3</span></div>
                        <p>入金</p>
                    </div>
                    <div class="fouda">
                        <div class="danhe"><span>4</span></div>
                        <p>交易</p>
                    </div>
                </div>
            </div>
            <h2 class="kaihu">开户前准备</h2>
            <div class="kaibox">
                <div class="sand">
                    <div class="namert"> 身份证 <span>NO.1</span></div>
                    <p>有效期内的二代身份证</p>
                </div>
                <div class="sand sanda">
                    <div class="namert"> 银行卡 <span>NO.2</span></div>
                    <p>户名与身份证一致的银行卡</p>
                </div>
                <div class="sand sands">
                    <div class="namert"> WIFI网络 <span>NO.3</span></div>
                    <p>3G/4G网络</p>
                </div>
            </div>
            <div class="kapi"><img
                    src="">
                <div class="txt">
                    <h6>行情分发,极速稳定</h6>
                    <p>专线直连交易所,毫秒级下单速度</p>
                </div>
            </div>
            <div class="kapi"><img
                    src="">
                <div class="txt">
                    <h6>客户至上,优享服务</h6>
                    <p>灵活投资、实现收益最大化</p>
                </div>
            </div>
            <div class="kapi"><img
                    src="">
                <div class="txt">
                    <h6>极速开户,超高配额</h6>
                    <p>0资金门槛,无需线下见证</p>
                </div>
            </div>
            <div class="hg" @click="kaihu"> 开户 </div>
        </div>
    </div>
</template>
<script>
export default{
  data () {
    return {

    }
  },
  methods: {
    kaihu () {
      // 判断是否登录
      if (localStorage.getItem('USERTOKEN')) {
        this.$router.push('/authentications')
      } else {
        this.$router.push('/register')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.dabg {
    background: #f0f0f0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    overflow-y: scroll;

    .gebgh {
        height: 4rem;
        background: linear-gradient(-55deg, rgb(80, 122, 250),rgb(115, 131, 251));

        h2 {
            text-align: center;
            height: 1.25rem;
            width: 100%;
            position: relative;
            line-height: 1.25rem;
            font-size: .48rem;
            color: #fff;
            background: transparent;
            font-weight: 500;
            z-index: 3;

            .hbnh {
                position: absolute;
                left: 0.4rem;
                font-size: .43rem;
                font-weight: 500;

                .fan {
                    width: 0.24rem;
                    height: 0.43rem;
                    background: url() no-repeat 50%;
                    background-size: 100%;
                    display: inline-block;
                    margin-right: 0.13rem;
                    vertical-align: middle;
                    margin-top: -0.05rem;
                }
            }
        }

        .fourg {
            width: 7.34rem;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            height: 0.8rem;
            position: relative;
            margin-top: 0.8rem;

            .xian {
                border-top: 0.0266rem dashed #fff;
                position: absolute;
                left: 0.4rem;
                width: 6.54rem;
                top: 0.4rem;
            }

            .fouda {
                width: 0.8rem;
                position: relative;

                .danhe {
                    width: 0.8rem;
                    height: 0.8rem;
                    background: hsla(0, 0%, 100%, .2);
                    border-radius: 0.4rem;
                    text-align: center;

                    span {
                        width: 0.53rem;
                        height: 0.53rem;
                        background: #fff;
                        display: inline-block;
                        margin: 0 auto;
                        margin-top: 0.13rem;
                        border-radius: 50%;
                        text-align: center;
                        color: #5d7dfb;
                        font-size: .43rem;
                        line-height: .54rem;
                    }
                }

                p {
                    text-align: center;
                    color: #fff;
                    font-size: .32rem;
                    margin-top: 0.13rem;
                }
            }
        }
    }

    .kaihu {
        color: #333;
        font-size: .15rem;
        text-align: center;
        margin-top: 0.17rem;
    }

    .kaibox {
        width: 9.48rem;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-top: 0.43rem;

        .sand {
            width: 3.07rem;
            padding: 0 0.266rem;
            background: linear-gradient(125deg, #ff839b, #fb5d7d);
            border-radius: 0.13rem;
            padding: 0.266rem 0;
            .namert {
                color: #fff;
                font-size: .4rem;
                text-align: center;

                span {
                    display: inline-block;
                    height: 0.37rem;
                    background: hsla(0, 0%, 100%, .2);
                    border-radius: 0.05rem;
                    font-size: .266rem;
                    line-height: .37rem;
                    padding: 0 0.13rem;
                    vertical-align: middle;
                    margin-top: -0.053rem;
                }
            }

            p {
                color: #fff;
                font-size: .266rem;
                margin-top: 0.266rem;
                text-align: left;
                line-height: 1.5;
                padding: 0 0.2rem;
            }
        }

        .sanda {
            background: linear-gradient(125deg, #feb145, #ff7e2b);
        }

        .sands {
            background: linear-gradient(125deg, #fb8066, #f64a41);
        }
    }

    .kapi {
        width: 9.29rem;
        height: 1.74rem;
        background: #fff;
        border-radius: 0.13rem;
        margin: 0 auto;
        margin-top: 0.53rem;
        display: flex;

        img {
            width: 1.07rem;
            height: 1.07rem;
            margin-left: 0.67rem;
            margin-top: 0.32rem;
        }

        .txt {
            margin-left: 0.67rem;

            h6 {
                color: #333;
                font-size: 0.4rem;
                padding-top: 0.4rem;
                font-weight: 600;
            }

            p {
                color: #999;
                font-size: .32rem;
                margin-top: 0.19rem;
            }
        }
    }

    .hg {
        width: 90%;
        height: 60px;
        background: linear-gradient(-55deg, rgb(80, 122, 250),rgb(115, 131, 251));
        border-radius: 5px;
        margin: 20px auto;
        text-align: center;
        line-height: 60px;
        color: #fff;
        margin-top: 50px;
        font-size: 18px;
    }
}
</style>
